<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/normal.css">
    <style>
        .content{
            padding-left: 40px;
            padding-top: 5px;
        }
        /* .content .img{
            margin-top: 20px;
        } */
        .content .img img{
            width: 200px;
            margin-right: 50px;
            vertical-align: middle;
        }
        .content .img span {
            font-size: 22px;
        }
        .content ul li{
            margin-top: 20px;
        }
        .content ul li label {
            font-size: 22px;
            /* font-weight: 400; */
        }
        .content ul li input{
            font-size: 22px;
            width: 1000px;
            height: 50px;
            border: 0;
        }
        .content ul li textarea{
            width: 1000px;
            height: 80px;
            font-size: 18px;
            vertical-align: middle;
            border: 0;
        }
        .alt-save{
            float: right;
            margin-top: 48px;
            margin-right: 30px;
        }
        .alt-save button {
            font-size: 19px;
            width: 150px;
            height: 45px;
            color: white;
            border: 0;
            border-radius: 10px;
        }
        .alt{
            background-color: skyblue;
        }
        .save{
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- 整体-->
    <div class="book-system">
        <!-- 侧边栏 -->
        <div class="left">
            <header>
                <h1>图书管理系统</h1>
            </header>
            <ul class="nav">
                <li>
                    <a href="" class="center">管理中心</a>
                    <ul class="item">
                        <li>
                            <a href=" " class="system">图书信息</a>
                            <ul>
                                <li><a href="../user-book/showbook.html">浏览图书</a></li>
                                <li><a href="../user-book/searchbook.html">查询图书</a></li>
                                <li><a href="../user-book/rankingbook.html">图书排行榜</a></li>
                            </ul>
                        </li>
    
                    </ul>
                    <ul class="item">
                        <li>
                            <a href="" class="system">个人信息</a>
                            <ul>
                                <li><a href="./borrowbook.html">借书情况</a></li>
                                <li class="active"><a href="./setuser.html" class="active">账号设置</a></li>
                            </ul>
                        </li>
    
                    </ul>
    
                </li>
    
            </ul>
        </div>
        <!-- 右边介绍 -->
        <div class="right">
            <!-- 上边栏 头像和介绍 -->
            <footer>
                <div class="welcome">
                    <h1>识万卷之书，得万里之路</h1>
                
                </div>
                <span>北京时间：2023/10/26 周四 17:17:17</span>
                <div class="img">
                    <img src="../images/user.png" alt="">
                    <span>usersys</span>
                </div>
    
            </footer>
            <!-- 内容 -->
            <div class="content">
                <ul>
                    <li class="img">
                        <img src="../images/user.png" alt="">
                        <span>usersys</span>
                    </li>
                    <li class="sex">
                        <label for="">性别：</label>
                        <input type="text" value="男">
                    </li>
                    <li class="birth">
                        <label for="">出生年月：</label>
                        <input type="text" value="2004/04/08">
                    </li>
                    <li class="hobby">
                        <label for="">爱好：</label>
                        <input type="text" value="睡觉">
                    </li>
                    <li class="tel">
                        <label for="">电话号码：</label>
                        <input type="tel" name="" id="" value="13744555000">
                    </li>
                    <li class="email">
                        <label for="">Email：</label>
                        <input type="email" value="1365448916@qq.com">
                    </li>
                    <li class="address">
                        <label for="">地址：</label>
                        <input type="text" value="华东交通大学">
                    </li>
                    <li class="info">
                        <label for="">个人简介：</label>
                        <textarea name="" id="" cols="30" rows="10">
本人沟通能力强，善于接受新事物。是一个开朗乐观，勤奋好学，有强烈责任感和进取心的人，一直以来我都非常认真地对待自己的生活和学习，做事勤奋诚恳，自信上进，喜欢交往，致学以用。在学习方面：专业基础扎实，虚心，好学钻研，努力提高自身素质，善于接受新鲜事物，善于学习新兴技术和新的方法。心理方面：自我调节能力较好，有耐受。个人亲和力较好，善于沟通和交流。
                        </textarea>
                    </li>
                </ul>
                <!-- 按钮 -->
                <div class="alt-save">
                    <button class="alt">修改个人信息</button>
                    <button class="save">保存</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>